<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div id="div1">
			<h3>{{msg}}</h3>
			<!-- 特点：如果没有渲染完成，则直接展现给用户
			插值表达式mustache  需要直接显示
			注意事项：只有显示时采用 输入操作时不可使用
			
			1.v-text指令：如果页面没有渲染完成，则不显示信息
			 -->
			<h3 v-text="msg">{{msg}}</h3>
			<!-- 2. v-html 直接渲染html标签-->
			<span v-html="h3Html">{{h3Html}}</span>
			<!-- 3.v-pre 跳过预编译 显示mustache标签体的本身 -->
			<span v-pre>{{msg}}</span><br />
			<!-- 4.v-once 只渲染一次 加载之后 即使修改了属性once的值 
			在原来的地方显示的内容也不会变
			比如在开发者模式中修改once的值-->
		    <span v-once>{{once}}</span><br />
			<!-- 5. v-model-->
			<input type="text" v-model="msg" />
			{{msg}}
		</div>
		<script src="../js/vue.js"></script>
		<script>
			const APP = new Vue({
				el: "#div1",
				data: {
					msg: "????????????",
					h3Html:'<h3>这是一个html渲染</h3>',
					once:'只能被渲染一次'
				}
		
			})
		</script>
	</body>
</html>
